"MackBook design using html css"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="laptop">
<div class="monitor">
<div class="screen">
<img src="http://www.wildosphereadventures.com/wp-content/themes/wildosphere/assets/img/kaziranga.jpg">
</div>
<div class="text-center mac-book">MacBook</div>
</div>
<div class="keybord">
</div>
<div class="keybord2">
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
background-color:#e8e8e8;
}
img{
width:100%;
}
.laptop {
top:20px;
position: relative;
width: 800px;
margin: 0 auto;
}
.monitor{
position:relative;
width:600px;
height:400px;
padding:30px 20px 40px;
border-radius:20px;
background-color:#000;
border:3px solid #F8E8D8;
}
.screen{
position: absolute;
width: 92%;
height: 82%;
background-color: #fff;
top: 6%;
left: 4%;
overflow:hidden;
}
.mac-book {
padding-top: 2px;
color: #c3c3c3;
position: absolute;
width: 99%;
height: 6.2%;
background-color: #212226;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: